<template>
    <div class="order">
    <!-- 导航开始 -->
    <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b">
        <el-menu-item>所有订单</el-menu-item>
        <el-menu-item>待支付</el-menu-item>
        <el-menu-item>待派单</el-menu-item>
        <el-menu-item>待接单</el-menu-item>
        <el-menu-item>待服务</el-menu-item>
        <el-menu-item>待确认</el-menu-item>
        <el-menu-item>已完成</el-menu-item>
    </el-menu>
    <!-- 导航结束 -->

    <!-- 表格开始 -->
    <el-table
        :data="orders"
        stripe
        style="width: 100%">
        <el-table-column
        prop="id"
        label="订单编号"
        width="180">
        </el-table-column>
        <el-table-column
        prop='orderTime'
        label="下单时间"
        width="180">
        </el-table-column>
        <el-table-column
        prop="total"
        label="总价"
        width="180">
        </el-table-column>
        <el-table-column
        prop="status"
        label="状态"
        width="180">
        </el-table-column>
        <el-table-column
        prop="customer.id"
        label="顾客ID">
        </el-table-column>
        <el-table-column
        prop="employee.id"
        label="员工ID"
        width="180">
        </el-table-column>
        <el-table-column
        fixed="right"
        label="操作"
        align="center"
        width="150">
        <template slot-scope="scope">
          <el-button @click="detailsHandler(scope.row)" type="success" plain size="mini">详情</el-button>
          <el-popconfirm title="确定下架这条信息吗？" @onConfirm="deleteHandler(scope.row.id)">
            <el-button  slot="reference" type="danger" plain size="mini">派单</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格结束 -->

    <!-- 分页开始 -->
    <div style="float:right;">
    <el-pagination
    layout="prev, pager, next"
    :page-size="list.pageSize"
    :total="total"
    @current-change="changeHandler">
  </el-pagination>
    </div>
    <!-- 分页结束 -->

    <!-- 模态框开始 -->
    <el-dialog :title="title" :visible.sync="dialogFormVisible">

      <!-- 表单开始 -->
      <!-- {{ruleForm}}     -->
      <el-form :model="ruleForm"  ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="名称" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="编号" prop="name">
          <el-input v-model="ruleForm.num"></el-input>
        </el-form-item>
        <el-form-item label="价格" prop="name">
          <el-input v-model="ruleForm.price"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="name">
          <el-input v-model="ruleForm.status"></el-input>
        </el-form-item>
      </el-form>
      <!-- 表单结束 -->

      <div slot="footer" class="dialog-footer">
        <el-button size='mini' @click="dialogFormVisible = false">取 消</el-button>
        <el-button size='mini' type="primary" @click="submitHandler">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 模态框结束 -->

    </div>
</template>

<script>
import {mapActions, mapState} from 'vuex'
export default {
    data(){
        return{
            list:{
                page:1,
                pageSize:10
            },
            dialogFormVisible:false,
            ruleForm:{},
            title:'添加产品信息',
            input: '', 
            activeIndex: '1',
        }
    },
    computed:{
        ...mapState('order',['orders']),
        ...mapState('order',['total']),
    },

    methods:{
    ...mapActions('order',['findAllOrder','deleteOrder']),
    //分页
    changeHandler(page){
      this.list.page=page;
      this.findAllOrder(this.list)
    },

    handleSelect(key, keyPath) {
        // console.log(key, keyPath);
    },

    //去添加产品信息
    showHandler(){
      this.dialogFormVisible=true
    },

    //提交保存产品信息
    submitHandler(){
      this.saveOrder(this.ruleForm).then(res=>{
        console.log(res,'/////////////////////////');
        if(res.status==200){
          this.dialogFormVisible=false
          this.findAllOrder(this.list)
          this.$message({
            type:'success',
            message:res.message
          })
        }else{
          this.$message({
            type:'error',
            message:res.message
          })
        }
      })
    },

    //订单详情
    detailsHandler(){
      this.$router.push('/order/nopay')
    },

    onSubmit() {
        console.log('submit!');
    }
  },

    created(){
    this.findAllOrder(this.list)
  }
}

</script>
